<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <title>查询预订信息</title>
    <!-- 设置视口以适应不同设备屏幕 -->
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <!-- 设置文档字符编码为UTF-8 -->
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <!-- 引入自定义样式表 -->
    <link rel="stylesheet" href="css/style.css" type="text/css" media="all" />
    <!-- 引入jQuery UI样式表 -->
    <link rel="stylesheet" href="css/jquery-ui.css" />
    <!-- 引入jQuery库 -->
    <script type="text/javascript" src="js/jquery.min.js"></script>
    <!-- 引入jQuery UI库，使用模块脚本，延迟加载 -->
    <script type="module" src="js/jquery-ui.js" defer></script>
    <style>
        /* 预订项样式 */
        .booking-item {
            border: 1px solid #ccc;
            padding: 10px;
            margin-bottom: 10px;
            background-color: #f9f9f9;
            border-radius: 5px;
        }
        /* 预订项中的标题样式 */
        .booking-item h3 {
            margin-top: 0;
        }
        /* 预订项中的段落样式 */
        .booking-item p {
            margin: 5px 0;
        }
        /* 按钮容器样式 */
        .button-container {
            text-align: center;
            margin-top: 20px
        }
        /* 按钮样式 
        .book {
            padding: 10px 20px;
            background-color: #007BFF;
            color: white;
            border: none;
            border-radius: 5px;
            cursor: pointer;
            font-size: 16px;
        }
        .book:hover {
            background-color: #0056b3;
        }
    </style>
</head>
<body>

<!-- 页面标题 -->
<h1>查询预定信息</h1>

<!-- 预订信息列表容器 -->
<div class="reg">
    <ul class="booking-list"></ul>
    <!-- 返回按钮容器 -->
    <div class="button-container">
        <button id="back-button" class="book">返回</button>
    </div>
</div>

<script type="module">
    // 当文档加载完成时，执行异步函数
    document.addEventListener('DOMContentLoaded', async () => {
        try {
            // 使用fetch API从服务器获取预订信息
            const response = await fetch('http://127.0.0.1:5500/bookings');
            const bookings = await response.json();
            displayBookings(bookings);
        } catch (error) {
            // 捕获网络错误
            console.error('网络错误:', error);
            alert('网络错误，请重试');
        }

        // 显示预订信息的函数
        function displayBookings(bookings) {
            const bookingList = document.querySelector('.booking-list');
            bookingList.innerHTML = ''; // 清空列表
            bookings.forEach(booking => {
                const li = document.createElement('div');
                li.className = 'booking-item';
                // 插入预订详情
                li.innerHTML = `
                    <h3>预订详情</h3>
                    <div>
                        <p>酒店: ${escapeHTML(booking.selectedHotel)}</p>
                        <p>成人数量: ${booking.adultCount}</p>
                        <p>儿童数量: ${booking.childCount}</p>
                        <p>套房类型: ${booking.suiteType}</p>
                        <p>入住日期: ${booking.checkInDate}</p>
                        <p>退房日期: ${booking.checkOutDate}</p>
                    </div>
                `;
                bookingList.appendChild(li);
            });
        }

        // 添加返回按钮的点击事件
        document.getElementById('back-button').addEventListener('click', () => {
            window.location.href = 'booking.html';
        });
    });

    // HTML转义函数，防止XSS攻击
    function escapeHTML(unsafe) {
        return unsafe
            .replace(/&/g, "&amp;")
            .replace(/</g, "&lt;")
            .replace(/>/g, "&gt;")
            .replace(/"/g, "&quot;")
            .replace(/'/g, "&#039;");
    }
</script>

</body>
</html>